<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
		<link rel="stylesheet" href="js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
		<link rel="stylesheet" href="js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
		<link rel="stylesheet" href="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">
		<link href="js/bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
		
		<script src="js/bower_components/jquery/dist/jquery.min.js"></script>
		<script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="js/bower_components/bootbox.min.js"></script>
		<script src="js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script src="js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
		
		<script src="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
		<script src="js/bower_components/moment/min/moment-with-locales.min.js"></script>
		<script src="js/bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
		
		<script>
			var currentTime=function(){
				$("currentTime").html(moment().format("YYYY-MM-DD dddd HH:mm:ss"));
			}
			
			$(function(){
				setInterval(currentTime,1000);
				
				User={
					"id":2
				}
				
				$.ajax({
					type:"put",
					url:"http://localhost:8080/getDaoHang",
					async:true,
					contentType:"application/json;charset=utf-8",
					data:JSON.stringify(User),
					dataType:'json',
					success:function(res){
						console.log("获取后端导航的返回结果：");
						console.log(res);
						
						$("#tree").treeview({
							data:res,
							selectedBackColor:"#0F3E6E",
							selectedIcon:"glyphicon glyphicon-ok",
							expandIcon:"glyphicon glyphicon-plus",
							onNodeSelected:function(event,data){
								console.log(data);
								var parent=$("#tree").treeview("getNode",data.parentId);
								console.log(parent);
								$("#breadcrumb").html("<li>" + parent.text + "</li>" + "<li>" + data.text + "</li>" );
								$("#contentFrame").attr("src",data.href);
								console.log("=========");
							}
						});
					}
				});
			})
			
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				word-wrap: break-word;
				font-family: '微软雅黑', sans-serif;
			}

			body {
				background: #000;
				min-height: 200vh;
			}

			header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				transition: 0.6s;
				padding: 40px 100px;
				z-index: 2;
			}

			header.sticky {
				padding: 5px 100px;
				background: #fff;
			}

			header .logo {
				position: relative;
				font-weight: 700;
				color: #fff;
				text-decoration: none;
				font-size: 2em;
				text-transform: uppercase;
				letter-spacing: 2px;
				transition: 0;
			}

			header ul {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			header ul li {
				position: relative;
				list-style: none;
			}

			header ul li a {
				position: relative;
				margin: 0 15px;
				text-decoration: none;
				color: #fff;
				letter-spacing: 2px;
				font-weight: 500px;
				transition: 0.5s;
			}
			.banner {
				position: relative;
				width: 100%;
				height: 100px;
				background: url();
				background-size: cover;
			}

			header.sticky .logo,
			header.sticky ul li a {
				color: #000;
			}
			#allmap {
				width: 100%;
				height: 500px;
				overflow: hidden;
				margin:0;
				font-family:"微软雅黑";
			}
		</style>
	</head>
	<body>
		<div>
			<header>
				<a href="#" class="logo">Logo</a>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
				</ul>
			</header>
			<section class="banner"></section>
			<script>
				window.addEventListener('scroll', () => {
					let header = document.querySelector('header')
					// 重要属性
					header.classList.toggle('sticky', window.scrollY > 0)
				})
			</script>
		</div>

		<div class="container-fluid">
			<div class="row">
				<div class="col-md-3">
					<div id="tree"></div>
				</div>
				<div class="col-md-9">
					<div class="row">
						<div class="col-md-12">
							<ol class="breadcrumb" id="breadcrumb">
								<li>
									<a href="#" target="contentFrame">首页</a>
								</li>
							</ol>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="embed-responsive embed-responsive-16by9">
								<iframe name="contentFrame" id="contentFrame" class="embed-responsive-item" src="text.html"></iframe>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
